<template>
    <div>
        <!-- <el-input v-model="Add"></el-input>
        <el-input v-model="Add2"></el-input>
        <div> {{ c }}</div> -->
        <el-button type="primary" @click="handelClick">点击打开弹窗</el-button>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="(item, index) in colunm" :key="index" :width="item.width" :prop="item.prop"
                :label="item.label" />
            <el-table-column label="操作" fixed="right" width="100px">
                <template v-slot="scope">
                    <span class="cursor" @click="handelEdit(scope.row)">修改</span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="Tips" append-to-body destroy-on-close>
            <AddDialog @success="success" @cancel="cancel" :initial-row="rows"></AddDialog>
        </el-dialog>

        <div class="tab">选项1</div>
        <div class="tab">选项1</div>
    </div>
</template>

<script setup>
import AddDialog from './components/AddDialog.vue'
import { computed, ref } from 'vue'

const colunm = ref([
    {
        label: '日期',
        prop: 'date',
        width: '180'
    },
    {
        label: '姓名',
        prop: 'name',
        width: '180'
    },
    {
        label: '地址',
        prop: 'address',
    }
])

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'shanghai',
        width: "180"
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'shanghai',
        width: "180"
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'beijing',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'beijing',
    },
]

const dialogVisible = ref(false)
const Tips = ref('添加')

function handelClick() {
    Tips.value = '新增一个属性'
    dialogVisible.value = true
    rows.value = {}

}
const Add = ref(1)
const Add2 = ref(2)

const c = computed(() => {

    return Number(Add.value) + Number(Add2.value)

})


// 点击确定调用的事件
function success(data) {
    console.log('确定')
    dialogVisible.value = false
    console.log(data)
}
// 点击取消调用的事件
function cancel() {

    console.log('取消')
    dialogVisible.value = false
}

const rows = ref({})
function handelEdit(row) {
    Tips.value = '修改这个数据',
        dialogVisible.value = true
    rows.value = row
}
</script>

<style lang="less" scoped>
.tab {
    width: 150px;
    height: 40px;
    margin: 0 auto;
    background: #ed6a5d;
    border-radius: 10px 10px 0 0;
    position: relative;
    transform: perspective(40px) rotateX(30deg);
    transform-origin: center bottom;
    display: flex;
    justify-content: center;
    align-items: center;

}

.tab::before,
.tab::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 0;

    /* 添加这一行 */
}

.tab::before {
    left: -10px;

    background: radial-gradient(circle at 0 0, transparent 10px, #ed6a5d 10px);
}

.tab::after {
    right: -10px;
    background: radial-gradient(circle at 100% 0, transparent 10px, #ed6a5d 10px);
}
</style>